<script setup lang="ts">
import HomeContent from '@/components/HomeContent/index.vue'
import { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import { useUserStore } from '@/stores'
import { PutPassParams } from '@/services/user/type'
import { putPassAPI } from '@/services/user/user'
const userStore = useUserStore()

// 获取表单元素
const putPassFormRef = ref<FormInstance>()

// 表单收集数据
const form = reactive<PutPassParams>({
  id: userStore.userInfo?.userInfo?.id,
  oldPass: '',
  newPass: '',
  checkPass: ''
})

// 判断新旧密码是否相同
const checkPass = (_rule: any, value: any, callback: any) => {
  if (value === form.oldPass) {
    callback(new Error('新密码不能与旧密码相同'))
  } else {
    callback()
  }
}
// 判断新旧密码是否相同
const checkNewPass = (_rule: any, value: any, callback: any) => {
  if (value !== form.newPass) {
    callback(new Error('两次新密码不一致'))
  } else {
    callback()
  }
}

// 定义表单规则
const putPassRules = reactive<FormRules<PutPassParams>>({
  oldPass: [
    { required: true, message: '请输入原密码', trigger: 'blur' },
    {
      pattern: /^.{6,}$/,
      message: '密码至少六位',
      trigger: 'blur'
    }
  ],
  newPass: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    {
      pattern: /^.{6,}$/,
      message: '密码至少六位',
      trigger: 'blur'
    },
    {
      validator: checkPass,
      trigger: 'blur'
    }
  ],
  checkPass: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    { validator: checkNewPass, trigger: 'blur' }
  ]
})

// watch(
//   () => userStore.userInfo,
//   newVal => {
//     form.id = newVal.userInfo.id
//   }
// )

const putPassComfirm = async () => {
  await putPassFormRef.value?.validate()
  await putPassAPI(form)
  ElMessage({
    type: 'success',
    message: '修改成功'
  })
  Object.assign(form, {
    oldPass: '',
    newPass: '',
    checkPass: ''
  })
}
</script>
<template>
  <HomeContent>
    <template #title> 修改密码 </template>
    <template #content>
      <el-form
        :model="form"
        ref="putPassFormRef"
        class="form"
        :rules="putPassRules"
        label-width="120px"
      >
        <el-form-item prop="oldPass" label="原密码">
          <el-input
            v-model="form.oldPass"
            class="meetingNumberInp"
            show-password
          />
        </el-form-item>
        <el-form-item prop="newPass" label="新密码">
          <el-input
            v-model="form.newPass"
            class="meetingNumberInp"
            show-password
          />
        </el-form-item>
        <el-form-item prop="checkPass" label="确认密码">
          <el-input
            v-model="form.checkPass"
            class="meetingNumberInp"
            show-password
          />
        </el-form-item>
        <el-form-item>
          <el-button class="formBtn" @click="putPassComfirm"
            >提交修改</el-button
          >
        </el-form-item>
      </el-form>
    </template>
  </HomeContent>
</template>

<style scoped lang="less">
.form {
  margin: 20px 0;
}
.meetingNumberInp {
  width: 300px;
  height: 40px;
}
.formBtn {
  width: 100px;
  background-color: #006eff;
  color: #fff;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-form-item__content) {
  justify-content: center;
  position: relative;
}
</style>
